<!DOCTYPE html>
<html>
<head>
    <title>spy-debugger</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overscroll-behavior: none;
        }
        .container {
            height: 100%;
            width: 100%;
        }
        .control-bar {
            padding-left: 3px;
            height: 99%;
            width: 3%;
            display: inline-block;
        }
        .monitor {
            display: inline-block;
            height: 100%;
            width: 95%;
        }
        .weinre-iframe, .anyproxy-iframe{
            height: 99%;
            width: 100%;
        }

        .control-bar-wrap{
            height: 100%;
            display: table;
        }
        .control-bar-container {
            display: table-cell;
            vertical-align: middle;
            border-right: #bbb4b4 2px solid;
        }
        .control-bar-btn {
            text-align: center;
            margin: 8px 4px;
            padding: 20px 4px;
            cursor: pointer;
            border: #42b983 2px solid;
            transition: background-color 0.5s, color 0.5s;
            -moz-transition: background-color 0.5s, color 0.5s; /* Firefox 4 */
            -webkit-transition: background-color 0.5s, color 0.5s; /* Safari 和 Chrome */
            -o-transition: background-color 0.5s, color 0.5s;
        }
        .control-bar-btn.off:hover {
            color: #ffffff;
            background-color: #42b983;
            border-radius: 5px;

        }
        .control-bar-btn.on {
            color: #ffffff;
            background-color: #42b983;
            border-radius: 5px;
        }
        .control-bar-btn.off {
            color: #42b983;
            background-color: #ffffff;
            border-radius: 5px;
        }
        .github-logo {
            margin: auto;
            width: 28px;
        }
        svg:hover {
            fill: #111;
        }
        .options-btn {
            margin: auto;
            width: 28px;
            top:10px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="control-bar">
            <div class="control-bar-wrap">
                <div class="control-bar-container">
                    <div class="options-btn">
                        <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 512.000000 498.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,498.000000) scale(0.100000,-0.100000)" fill="#42b983" stroke="none"><path d="M1480 4745 c-267 -129 -488 -235 -492 -237 -3 -2 9 -136 28 -298 18 -162 34 -308 34 -325 0 -22 -21 -56 -79 -130 l-80 -101 -316 -34 c-173 -19 -319 -37 -324 -40 -7 -4 -253 -1062 -248 -1066 11 -6 543 -337 545 -339 2 -2 17 -60 33 -130 l29 -127 -22 -37 c-12 -20 -89 -141 -170 -270 -81 -128 -148 -237 -148 -242 0 -9 664 -845 677 -852 5 -2 139 42 298 99 160 57 299 103 311 103 12 1 71 -23 131 -53 l110 -54 27 -74 c46 -129 186 -531 186 -535 0 -1 248 -3 550 -3 303 0 550 1 550 3 0 4 175 507 196 565 15 40 22 46 125 97 60 30 117 55 127 55 15 0 472 -156 585 -199 27 -10 29 -8 367 414 187 234 340 429 340 433 0 5 -72 123 -161 263 -88 140 -165 262 -170 271 -12 21 43 268 62 279 8 4 131 81 274 171 164 103 259 169 258 178 -7 53 -238 1046 -244 1050 -5 3 -151 21 -325 40 l-316 34 -82 104 -81 104 36 322 c21 176 34 322 31 324 -4 2 -225 108 -492 237 l-485 233 -230 -229 -230 -229 -135 0 -135 0 -230 229 -230 230 -485 -234z m600 -430 l185 -185 295 0 295 0 185 185 c146 147 189 185 206 181 11 -3 121 -54 245 -114 l225 -109 -22 -194 c-13 -107 -26 -226 -30 -266 l-7 -72 183 -228 182 -228 266 -30 266 -30 58 -255 c32 -140 56 -260 54 -266 -2 -6 -104 -73 -225 -148 -122 -76 -221 -140 -221 -141 0 -2 -29 -130 -65 -285 -35 -156 -62 -288 -58 -294 3 -6 66 -106 140 -222 73 -116 133 -215 133 -219 0 -11 -320 -409 -332 -414 -5 -2 -121 36 -257 83 l-247 87 -265 -129 -266 -129 -36 -104 c-19 -57 -59 -170 -87 -252 l-52 -147 -268 0 -268 0 -52 147 c-28 82 -68 195 -87 252 l-36 104 -266 129 -265 129 -247 -87 c-136 -47 -252 -84 -258 -83 -5 2 -83 96 -172 208 -162 202 -163 204 -148 230 9 14 73 116 143 227 l126 200 -44 190 c-24 104 -54 233 -66 286 l-21 97 -221 137 c-121 76 -222 142 -224 148 -2 6 22 126 54 266 l58 255 266 30 266 30 183 229 183 228 -30 265 -30 266 230 112 c127 62 238 114 246 114 8 1 98 -82 200 -184z"/><path d="M2415 3429 c-204 -29 -418 -140 -562 -293 -115 -121 -201 -273 -245 -433 -29 -105 -31 -362 -5 -467 74 -293 269 -533 539 -661 144 -68 243 -8 418 -89 117 0 162 4 234 22 215 54 419 189 553 366 60 79 137 240 165 341 32 119 32 365 0 485 -29 108 -106 266 -170 350 -215 284 -572 430 -927 379z m310 -305 c33 -8 98 -33 145 -56 163 -79 307 -256 356 -438 23 -87 23 -253 0 -339 -52 -194 -176 -347 -357 -441 -99 -51 -190 -73 -309 -73 -114 0 -206 21 -297 67 -188 94 -316 249 -369 446 -23 87 -23 253 0 340 61 225 239 412 464 485 102 33 252 37 367 9z"/></g></svg> -->
                    </div>
                    <div id="weinreBtn" class="spy-debugger-btn control-bar-btn on">
                        页面调试
                    </div>
                    <div id="anyProxyBtn" class="any-proxy-btn control-bar-btn off">
                        请求抓包
                    </div>
                    <div class="github-logo">
                        <a href="https://github.com/wuchangming/spy-debugger" target="_blank">
                            <svg aria-hidden="true" height="28" version="1.1" viewBox="0 0 16 16" width="28"><path fill-rule="evenodd" fill="#42b983" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="monitor">
            <div id="weinreIframe" class="weinre-iframe" >
                <iframe src="<%= weinreUrl %>" frameborder="0" height="100%" width="100%" ></iframe>
            </div>
            <div id="anyProxyIframe" class="anyproxy-iframe" style="display:none;">
                <iframe src="<%= anyProxyUrl %>" frameborder="0" height="100%" width="100%" ></iframe>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var weinreBtn = document.getElementById('weinreBtn');
var anyProxyBtn = document.getElementById('anyProxyBtn');
var weinreIframe = document.getElementById('weinreIframe');
var anyProxyIframe = document.getElementById('anyProxyIframe');

weinreBtn.onclick=function(){
    weinreIframe.style.display = 'block';
    anyProxyIframe.style.display = 'none';
    weinreBtn.className = weinreBtn.className.replace(new RegExp('(?:^|\\s)'+ 'off' + '(?:\\s|$)'), ' ');
    weinreBtn.className = weinreBtn.className.replace(new RegExp('(?:^|\\s)'+ 'on' + '(?:\\s|$)'), ' ');
    weinreBtn.className += " on";

    anyProxyBtn.className = anyProxyBtn.className.replace(new RegExp('(?:^|\\s)'+ 'on' + '(?:\\s|$)'), ' ');
    anyProxyBtn.className = anyProxyBtn.className.replace(new RegExp('(?:^|\\s)'+ 'off' + '(?:\\s|$)'), ' ');
    anyProxyBtn.className += " off";
}

anyProxyBtn.onclick=function(){
    weinreIframe.style.display = 'none';
    anyProxyIframe.style.display = 'block';
    anyProxyBtn.className = anyProxyBtn.className.replace(new RegExp('(?:^|\\s)'+ 'off' + '(?:\\s|$)'), ' ');
    anyProxyBtn.className = anyProxyBtn.className.replace(new RegExp('(?:^|\\s)'+ 'on' + '(?:\\s|$)'), ' ');
    anyProxyBtn.className += " on";
    weinreBtn.className = weinreBtn.className.replace(new RegExp('(?:^|\\s)'+ 'on' + '(?:\\s|$)'), ' ');
    weinreBtn.className = weinreBtn.className.replace(new RegExp('(?:^|\\s)'+ 'off' + '(?:\\s|$)'), ' ');
    weinreBtn.className += " off";
}

</script>
</html>
